<template>
	<view class="message-list">
		<view class="message-list-li" v-for="(n,index) in data.list" @click="clickMessage(n)">
			<view class="message-list-li-left">
				<userAvatar radius="50%" :src="n.userInfo.avatar" :size="MessageAvatarSize">
				</userAvatar>
			</view>
			<view class="message-list-li-right">
				<view class="message-list-li-right-top">
					<userName :username="n.userInfo.username"></userName>
					<text class="message-date">3分钟前</text>
				</view>
				<view class="message-list-li-right-bottom">
					<text class="message-value">我是消息内容</text>
					<text class="message-badge">1</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import userName from '@/components/user_name_text/user_name_text'
	import userAvatar from '@/components/user_avatar/user_avatar.vue'
	import useMessageStore from '@/stores/store/message.js'
	const MessageStore = useMessageStore()

	import {
		ref,
		computed,
	} from 'vue'

	const MessageAvatarSize = ref("80")

	import {
		toRaw
	} from 'vue'

	const Conversation = computed(() => MessageStore.Conversation)

	defineProps(["data"])
	let Emites = defineEmits(["click"])

	function clickMessage(n) {
		Emites("click", toRaw(n))
	}
</script>

<style scoped>
	.message-list {
		display: flex;
		flex-direction: column;
	}

	.message-list-li {
		display: flex;
		border-bottom: 1rpx solid #c3c3c344;
		padding: 30rpx 40rpx;
		gap: 30rpx;
	}

	.message-list-li:active {
		background-color: #c3c3c344;
	}

	.message-list-li-left {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.message-list-li-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 25rpx;
		justify-content: space-between;
	}

	.message-list-li-right-top {
		margin-bottom: 5rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.message-list-li-right-bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: gray;
	}

	.message-date {
		color: gray;
	}

	.message-badge {
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: red;
		color: white;
		text-align: center;
		line-height: 30rpx;
		font-size: 18rpx;
	}
</style>